import { ExtractPropTypes } from "vue"
import { TuniaoSize, TuniaoSizes, TuniaoType, TuniaoTypes } from '../../types/tuniao-ui'
import { validatorColorValue, validatorSizeValue } from '../../utils'

/**
 * tag形状有效值
 */
const TagShapes = ['round', 'elliptic', 'leftCircle', 'rightCircle'] as const
export type TagShape = typeof TagShapes[number]

/**
 * props参数
 */
export const tagProps = {
  /** 宽度, 默认单位rpx */
  width: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 高度, 默认单位rpx */
  height: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 尺寸 sm lg xl, 单独设置宽高会覆盖尺寸设置的值 */
  size: {
    type: String,
    default: '',
    validator: (value: TuniaoSize | '') => {
      return value === '' || TuniaoSizes.includes(value)
    }
  },
  /** 标签形状 round 圆角 elliptic 椭圆 leftCircle 左半圆 rightCircle 右半圆 */
  shape: {
    type: String,
    default: '',
    validator: (value: TagShape | '') => {
      return value === '' || TagShapes.includes(value)
    }
  },
  /** 镂空标签, 如果没有设置边框则变成透明标签 */
  plain: {
    type: Boolean,
    default: false
  },
  /** 显示边框, 当plain为true时生效 */
  border: {
    type: Boolean,
    default: false
  },
  /** 加粗边框, 当plain和border同时为true时才生效 */
  borderBold: {
    type: Boolean,
    default: false
  },
  /** border边框颜色, 当plain和border同时为true时才生效 */
  borderColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('border', value)
    }
  },
  /** 背景颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  bgColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('bg', value)
    }
  },
  /** 字体颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  color: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 颜色类型，如果自定义了颜色则使用颜色的值 */
  type: {
    type: String,
    default: '',
    validator: (value: TuniaoType | '') => {
      return value === '' || TuniaoTypes.includes(value)
    }
  },
  /** 设置阴影 */
  shadow: {
    type: Boolean,
    default: false
  },
  /** 阴影颜色 */
  shadowColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('shadow', value)
    }
  },
  /** 字体大小, 默认单位为rpx */
  fontSize: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 加粗字体 */
  fontBold: {
    type: Boolean,
    default: false
  },
  /** 点击时的效果class */
  hoverClass: {
    type: String,
    default: 'tn-hover'
  },
  /** 自定义样式, 会覆盖配置的宽高和字体信息 */
  customStyle: {
    type: Object,
    default: () => {
      return {}
    }
  },
  /** 点击按钮时传递的标志符 */
  index: {
    type: [String, Number],
    default: ''
  }
}
export type TagProps = ExtractPropTypes<typeof tagProps>

export const tagEmits = {
  /** 点击回调 */
  click: (index: string | number) => typeof index === 'string' || typeof index === 'number',
}
export type TagEmits = typeof tagEmits
